<template>
	<div style="display: flex;flex-direction: column;" class="otherPage corporateNews videoDisplayDetail">
		<Header :selected="4"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''"></div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="3">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;">
				<el-row>
					<el-col class="corporateNewsDetailTitle">
						{{data.titles}}
					</el-col>
					<el-col class="corporateNewsDetailDate">
						{{$t("releaseDate")}}: {{data.createTime}}
					</el-col>
					<el-col class="corporateNewsDetailDescription">
						<video :poster="isMobile ? data.preview : null" :src="data.fileUrl" loop preload="auto" muted
							style="object-fit:fill;  " controls playsinline="true" x5-video-player-type="h5"
							class="swiper-lazy"></video>
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		corporateNews
	} from '../../utils/menu.js'
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				loading: true,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				isMobile: false,
				menus: corporateNews,
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//企业新闻
						label: this.$t('corporateNews'),
						to: '/corporateNews'
					},
					{
						//视频展示
						label: this.$t('videoDisplay'),
						to: '/videoDisplay'
					}
				],
				data: {
					createTime: '',
					titles: '',
					fileUrl: ''
				},
				hoverIndex: -1
			};
		},
		computed: {},
		created() {
			this.loading = false;
		},
		mounted() {
			this.isMobile = this.$request.checkIsMobile();
			this.id = this.$route.query.id;
			// this.getNewsTrendData();
			this.bindVideo();
			this.videoBgImage();

		},
		methods: {
			videoBgImage() {
				let params = {};
				let that = this;
				that.$request.videoBgImage(params).then(res => {
					that.bg_img = res.data.fileUrl;
				}).catch((error) => {
					console.log(error);
				});
			},
			bindVideo() {
				// 请求表格数据
				let params = {
					videoDisplayId: this.id
				};
				let that = this;
				this.$request.videoDetail(params).then(res => {
					if (res && res.data) {
						this.data = res.data
					}
				}).catch((error) => {
					console.log(error)
				})
			},
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateNews/corporateNews.css");

	.corporateNewsDetailTitle {
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		text-align: center;
		font-weight: 530;
		color: #333333;
	}

	.corporateNewsDetailDate {
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-weight: 400;
		color: #999999;
		line-height: 33px;
	}

	.corporateNewsDetailDescription {
		font-size: 16px;
		font-weight: 400;
		color: #666666;
		line-height: 27px;
		text-align: center;
	}



	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	video {
		width: 100%;
		height: auto;
	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}


	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {}
</style>